<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>032-清除行内和行内块元素的空格问题</title>
		<style>
			div {
				width: 400px;
				height: 400px;
				background-color: skyblue;
				font-size: 0; /* 清除行内/行内块元素的空格 */
			}

			span {
				font-size: 24px; /* 单独设置字体大小为 24px */
				background-color: antiquewhite;
			}

			img {
				width: 100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- 行内元素和行内块元素的换行，会被浏览器解析成一个空格 -->
		<div>
			<span>人之初</span>
			<span>性本善</span>
			<span>性相近</span>
			<hr />
			<img src="https://www.runoob.com/try/demo_source/logo.png" alt="runoob" />
			<img src="https://www.runoob.com/try/demo_source/logo.png" alt="runoob" />
			<img src="https://www.runoob.com/try/demo_source/logo.png" alt="runoob" />
		</div>
	</body>
</html>
